<template>
  <div style="width: 1000px;height: 600px;" id="myDiv">
  </div>
</template>

<script>
import * as echarts from '../../assets/echarts.min.js'
import axios from 'axios'
import { onMounted } from 'vue'

export default {
  name: 'one5',
  setup() {

    // 生命周期函数，项目启动时会自动运行
    onMounted(() => {
      datainit()  // 调用初始化的方法
    });

    // 初始化的方法
    const datainit = () => {
      var url = '/api/data/list2'
      // 请求后端接口
      axios.get(url).then(res => {

        let citys = ['布维岛', '韦奇岛', '唐纳岛', '乌拉圭', '秘鲁']
        let buys = [535.48958545, 547.9834394, 599.3437832, 406.456732, 515.09843]

        let dq = ['南极洲', '南极洲', '南极洲', '南美洲', '南美洲']
        let dqpj = [515.48958545, 567.9834394, 582.3437832, 300.456732, 555.09843]

        console.log(citys);
        console.log(buys);
        console.log(dq);
        console.log(dqpj);

        // 图表的初始化，放在数据获取成功后
        init(citys, buys,dq,dqpj);

      })


    };

    // 初始化图表
    const init = (citys, buys,dq,dqpj) => {
      var options = {
        title: {
          text: '折柱混合图展示2020年各省平均消费额和所对应地区平均消费额对比情况'
        },
        xAxis: [
          {
            data: citys,
            name: '省份',
            axisLabel: {
              interval: 0
            }
          },
          {
            data: dq,
            name: '地区'
          }
        ],
        yAxis: {
          name: '平均消费额'
        },
        series: [
          {
            data: buys,
            type: 'bar'
          },
          {
            data: dqpj,
            type: 'line'
          }
        ]
      }

      let myChart = echarts.init(document.getElementById("myDiv"));
      myChart.setOption(options)

    }




  }




}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
